<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="教师名称">
          <el-input placeholder="请输入教师名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">{{ $t('search') }}</el-button>
          <el-button type="primary" icon="el-icon-upload" @click="handleUpload">批量上传</el-button>
          <a type="primary" icon="el-icon-download">下载模板</a>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="table.data" border>
        <el-table-column prop="title" label="教师名称" />
        <el-table-column :label="$t('op')">
          <template slot-scope="s">
            <el-button type="danger" @click="handleEnable(s)">禁用</el-button>
            <el-button type="primary" @click="handleActive(s)">激活</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        class="pagination"
        :current-page="table.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="table.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="table.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getTeacherList } from '../../../api/school'

export default {
  data() {
    return {
      table: {
        data: [],
        total: 0,
        page: 1,
        size: 10,
        search: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      getTeacherList({
        limit: this.table.size,
        page: this.table.page,
        search: this.table.search
      }).then(res => {
        console.log(res)
        this.table = Object.assign({}, this.table, {
          total: res.total,
          data: res.data
        })
      })
    },
    handleCurrentChange(page) {
      this.table = Object.assign({}, this.table, {
        page: page
      })
      this.getList()
    },
    handleSizeChange(size) {
      this.table = Object.assign({}, this.table, {
        size: size
      })
      this.getList()
    },
    handleSearch() {
      this.table = Object.assign({}, this.table, {
        search: ''
      })
      this.getList()
    },
    handleActive(scope) {

    },
    handleEnable(scope) {

    },
    handleUpload() {}
  }
}
</script>

<style scoped>
  .pagination {
    margin-top: 10px;
  }
</style>
